<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>拖拽</title>
  <style>
    #tarDiv {
      width: 500px;
      height: 500px;
      margin-top: 100px;
      background: #f6f6f6;
    }
  </style>
</head>
<body>
<div id="srcDiv">
  <img id="img" src="http://img.zcool.cn/community/0311adb57b9c87d0000018c1b689f55.jpg@250w_188h_1c_1e_2o_100sh.jpg"
       alt="img">
</div>
<div id="srcDivTip"></div>
<div id="tarDivTip"></div>
<div id="tarDiv"></div>

<script>
  function $(id) {
    return document.getElementById(id);
  }

  function initial() {
    // img 绑定事件
    // 开始拖拽时
    // 拖拽过程中
    // 结束拖拽

    var img = $('img');
    var tar = $('tarDiv');


    img.addEventListener('dragstart', img_dragstart, false);
    img.addEventListener('drag', img_drag, false);
    img.addEventListener('dragend', img_end, false);

    tar.addEventListener('dragenter', tar_enter, false);
    tar.addEventListener('dragover', tar_over, false);
    tar.addEventListener('drop', tar_drop, false);
    tar.addEventListener('dragleave', tar_leave, false);
  }

  var iHtml = '';
  function img_dragstart(e) {
    $('srcDivTip').innerHTML = '开始拖拽...';

    // 获取图像路径
    var src = e.target.src;
    // 地址保存到dataTransfer对象
    e.dataTransfer.setData('text',src);
  }
  function img_drag(e) {
    var x = e.pageX;
    var y = e.pageY;
    $('srcDivTip').innerHTML = x + '+' + y;
  }
  function img_end(e) {
    var x = e.pageX;
    var y = e.pageY;
    $('srcDivTip').innerHTML = x + '+' + y;
  }

  function tar_enter(e) {
    e.preventDefault();
    $('tarDivTip').innerHTML = '进入目标区域';
  }
  function tar_over(e) {
    e.preventDefault();
    $('tarDivTip').innerHTML = '目标';
  }
  function tar_drop(e) {
    e.preventDefault();
    $('tarDivTip').innerHTML = '投放目标';
    var src = e.dataTransfer.getData('text',src);
    $('tarDiv').style.background = 'url('+src+') #f6f6f6 no-repeat center';
  }
  function tar_leave(e) {
     e.preventDefault();
    $('tarDivTip').innerHTML = '离开目标操作区域';
  }

  window.addEventListener('load', initial, false);


</script>
</body>
</html>